import React from 'react'
import { Table, Icon, Switch, Radio, Form, Divider, Popconfirm,Pagination } from 'antd';
import {inject, observer} from "mobx-react/index";
import Tip from "../../common/tip"
import {Link} from "react-router-dom"

@inject("store")
@observer
class ActivityList extends React.Component {
    componentDidMount = () => {
        this.props.store.actions.getActivity(this.props.status)
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.status!=this.props.status)
            this.props.store.actions.getActivity(nextProps.status)
    }
    render(){
        let store = this.props.store
        let list=store.activities
        const page=store.page
        const columns = [{
            title: '活动名称',
            dataIndex: 'activityName',
            key: 'Name',
            render: (text,record) =>this.props.status==="ing"?<a href={`/activity/detail/${record.id}`}>{text}</a>:<div>{text}</div>,
        }, {
            title: '活动规模',
            dataIndex: 'allowNum',
            key: 'allowNum',
        },{
            title: '已报名人数',
            dataIndex: 'applyNumber',
            key: 'applyNumber',
            render: (text,record) =>this.props.status==="ing"?<Link to={`/console/activity/hasApplyList/${record.id}`}>{text}</Link>:<div>{text}</div>,
        }, {
            title: '开始时间',
            dataIndex: 'startTime',
            key: 'startTime',
        },{
            title: '结束时间',
            dataIndex: 'endTime',
            key: 'endTime',
        }, this.props.status==="ing"?{
            title: 'Action',
            key: 'action',
            render: (text, record) => (
                <span>
                  <Popconfirm title="确定取消吗" onConfirm={()=>store.actions. cancelActivity(record.id)}>
                    <a href="javascript:;">取消活动</a>
                  </Popconfirm>
                  <Divider type="vertical" />
                  <Link to={"/console/activity/editActivity/"+record.id}>修改活动</Link>
                </span>
            ),
        }:{}];
        const footer=()=>{
            return (
                <span style={{color:"#888",fontSize:"12px"}}>共{store.total}条数据，每页显示{page.pageSize}条</span>
            )
        }
        return(
            <div>
                <Tip title={this.props.status==="ing"?"未结束活动":"已结束活动"}/>
            <Table
                columns={columns}
                expandedRowRender={record => <p style={{ margin: 0 }}>{record.activityName}</p>}
                dataSource={list.slice()}
                pagination={{
                    total: store.total,
                    pageSize: page.pageSize,
                    defaultPageSize: page.pageSize,
                    onChange:(page)=>store.actions.setCurrentPage(this.props.status,page)
                }}
                footer={footer}
            />
            </div>
        )
    }
}
export default  ActivityList